<template>
    <section id="discussion" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <!-- 顶部标题和描述 -->
            <div class="discussion-title-block">
                <h2 class="text-[clamp(2rem,4vw,3rem)] font-extrabold mb-3 " style="font-size: 30px;">小组讨论</h2>
                <p class="text-gray-400 max-w-2xl mx-auto text-lg">与小组成员交流学习心得，解决遇到的问题</p>
            </div>
            <div style="display: flex; justify-content: center;">
                <div style="display: flex;">
                    <div class="flex gap-8 justify-center" style="width: 400px;">
                        <!-- 左侧：我的小组+在线成员 -->
                        <div class="flex flex-col gap-6 w-80 flex-shrink-0">
                            <!-- 我的⼩组 -->
                            <div class="bg-white rounded-2xl shadow-md p-0 overflow-hidden group-list-card">
                                <div class="group-list-header">我的小组</div>
                                <div class="flex flex-col gap-3 p-5">
                                    <div class="group-card group-card-active">
                                        <div class="group-icon bg-blue-100 text-blue-500"><i class="fa fa-code"></i>
                                        </div>
                                        <div class="flex-1">
                                            <div class="group-title">Web前端开发学习小组</div>
                                            <div class="group-desc">12名成员 · 活跃中</div>
                                        </div>
                                    </div>
                                    <div class="group-card">
                                        <div class="group-icon bg-purple-100 text-purple-500"><i
                                                class="fa fa-paint-brush"></i></div>
                                        <div class="flex-1">
                                            <div class="group-title">UI/UX设计学习小组</div>
                                            <div class="group-desc">8名成员 · 活跃中</div>
                                        </div>
                                    </div>
                                    <div class="group-card">
                                        <div class="group-icon bg-green-100 text-green-500"><i
                                                class="fa fa-database"></i></div>
                                        <div class="flex-1">
                                            <div class="group-title">Node.js后端开发小组</div>
                                            <div class="group-desc">10名成员 · 活跃中</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="px-5 py-4 border-t border-gray-100">
                                    <a-button type="primary" class="w-full rounded-full" ghost
                                        @click="$emit('joinNewTeam')">
                                        <i class="fa fa-plus mr-1"></i> 加入新小组
                                    </a-button>
                                </div>
                            </div>
                            <!-- 在线成员 -->
                            <div class="bg-white rounded-2xl shadow-md p-0 member-list-card">
                                <div class="member-list-header">在线成员 (5)</div>
                                <div class="flex flex-col gap-2 p-5">
                                    <div class="member-row">
                                        <img src="https://picsum.photos/id/64/100/100" class="member-avatar" />
                                        <div class="flex-1">
                                            <div class="member-name">张小明 (你)</div>
                                            <div class="member-status text-blue-500">正在输入...</div>
                                        </div>
                                    </div>
                                    <div class="member-row">
                                        <img src="https://picsum.photos/id/65/100/100" class="member-avatar" />
                                        <div class="flex-1">
                                            <div class="member-name">李大神</div>
                                            <div class="member-status text-green-500">在线</div>
                                        </div>
                                    </div>
                                    <div class="member-row">
                                        <img src="https://picsum.photos/id/66/100/100" class="member-avatar" />
                                        <div class="flex-1">
                                            <div class="member-name">王小明</div>
                                            <div class="member-status text-green-500">在线</div>
                                        </div>
                                    </div>
                                    <div class="member-row">
                                        <img src="https://picsum.photos/id/67/100/100" class="member-avatar" />
                                        <div class="flex-1">
                                            <div class="member-name">赵小红</div>
                                            <div class="member-status text-yellow-500">5分钟前</div>
                                        </div>
                                    </div>
                                    <div class="member-row">
                                        <img src="https://picsum.photos/id/68/100/100" class="member-avatar" />
                                        <div class="flex-1">
                                            <div class="member-name">周七</div>
                                            <div class="member-status text-gray-400">1小时前</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 右侧主讨论区 -->
                    <div class="flex-1 flex flex-col min-w-0" style="width: 1000px;margin-left: 20px;height: 800px;">
                        <div class="bg-white flex flex-col h-[600px] discussion-main-card" style="height: 640px;">
                            <!-- 聊天头部美化 -->
                            <div class="discussion-header flex items-center px-8 py-4 border-b border-gray-100 justify-between" style="display: flex;align-items: center;justify-content: space-between;">
                                <div class="flex items-center gap-4" style="display: flex;align-items: center;">
                                    <div class="discussion-header-icon flex items-center justify-center rounded-full" style="width:48px;height:48px;background:#165dff;margin-right: 10px;">
                                        <i class="fa fa-code text-white text-2xl" style="font-size: 24px;"></i>
                                    </div>
                                    <div class="flex flex-col justify-center" style="display: flex;flex-direction: column;justify-content: center;">
                                        <span class="discussion-header-title font-bold text-lg" >Web前端开发学习小组</span>
                                        <span class="discussion-header-desc text-gray-400 text-sm mt-1">12名成员 · 活跃中</span>
                                    </div>
                                </div>
                                <div class="flex items-center" style="display: flex;align-items: center;">
                                    <button class="header-flat-btn">
                                        <i class="fa fa-search"></i>
                                    </button>
                                    <button class="header-flat-btn">
                                        <i class="fa fa-ellipsis-v"></i>
                                    </button>
                                </div>
                            </div>
                            <!-- 消息流 -->
                            <div class="flex-1 overflow-y-auto px-8 py-6 space-y-6 bg-gray-50">
                                <!-- 别人消息 -->
                                <div class="flex items-start gap-3">
                                    <img src="https://picsum.photos/id/65/100/100" class="w-10 h-10 rounded-full" />
                                    <div>
                                        <div class="flex items-center gap-2 mb-1">
                                            <span class="font-medium">李大神</span>
                                            <span class="text-xs text-gray-400">10:25</span>
                                        </div>
                                        <div class="msg-bubble msg-bubble-other">
                                            大家早上好！今天我们来讨论一下Vue3的Composition API，有谁已经开始使用了吗？
                                        </div>
                                    </div>
                                </div>
                                <!-- 自己消息 -->
                                <div class="flex items-start gap-3 justify-end">
                                    <div>
                                        <div class="flex items-center gap-2 mb-1 justify-end">
                                            <span class="text-xs text-gray-400">10:35</span>
                                            <span class="font-medium">张小明 (你)</span>
                                        </div>
                                        <div class="msg-bubble msg-bubble-me">
                                            我也在用，确实很好用，不过现在处理组件树状态共享时遇到了一些问题，特别是非父子组件之间。
                                        </div>
                                    </div>
                                    <img src="https://picsum.photos/id/64/100/100" class="w-10 h-10 rounded-full" />
                                </div>
                                <!-- 更多消息... -->
                            </div>
                            <!-- 输入区美化 -->
                            <div class="chat-input-bar flex items-end px-6 py-5" style="width:100%;height:100px;min-height:100px;max-height:100px;position:relative;background:#fff;border-radius:0;box-shadow:none;border-top:1px solid #e5e7eb;">
                              <!-- icon按钮区 -->
                              <div class="flex items-center gap-2 mr-3" style="display: flex;align-items: center;margin-right: 12px;">
                                <button class="chat-input-icon-btn"><i class="fa fa-smile-o"></i></button>
                                <button class="chat-input-icon-btn"><i class="fa fa-paperclip"></i></button>
                                <button class="chat-input-icon-btn"><i class="fa fa-picture-o"></i></button>
                                <button class="chat-input-icon-btn"><i class="fa fa-code"></i></button>
                              </div>
                              <!-- 输入框 多行textarea，支持快捷键 -->
                              <a-textarea
                                class="chat-input-el flex-1"
                                :autoSize="{ minRows: 2, maxRows: 2 }"
                                v-model:value="chatInput"
                                placeholder="输入你的消息..."
                                style="height: 60px; padding-right: 110px; resize: none;"
                                @keydown="handleInputKeydown"
                              />
                              <!-- 发送按钮 绝对定位右下角 -->
                               <div style="padding-top: 50px;">
                                <a-button class="chat-send-btn send-btn-abs" @click="sendMessage" shape="circle" ghost >
                                <i class="fa fa-paper-plane"></i>
                              </a-button>
                               </div>
                              
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
<script setup>
import { defineEmits } from 'vue';
import { ref, onMounted } from 'vue';
import { Button, Input, message } from 'ant-design-vue';
const { TextArea } = Input;
const emit = defineEmits(['switchTeam', 'joinNewTeam']);

// 用户信息相关 - 直接在组件中实现
const userInfo = ref(null);

// 检查用户登录状态
const checkUserLogin = () => {
  try {
    const storedUserInfo = localStorage.getItem('userInfo')
    if (storedUserInfo) {
      const userInfo = JSON.parse(storedUserInfo)
      console.log('DiscussionSection - 当前登录用户信息:', userInfo)
      return userInfo
    } else {
      console.log('DiscussionSection - 用户未登录')
      return null
    }
  } catch (error) {
    console.error('检查用户登录状态失败:', error)
    return null
  }
}

// 获取当前用户ID - 等效于 StpUtil.getLoginIdAsInt()
const getLoginIdAsInt = () => {
  const userInfo = checkUserLogin()
  if (userInfo && userInfo.userId) {
    return parseInt(userInfo.userId)
  }
  return null
}

// 获取当前用户ID
const getCurrentUserId = () => {
  const userInfo = checkUserLogin()
  if (userInfo && userInfo.userId) {
    return userInfo.userId
  }
  return null
}

const chatInput = ref('');

function sendMessage() {
  const userId = getLoginIdAsInt();
  if (!userId) {
    message.warning('请先登录后再发送消息');
    return;
  }
  
  if (chatInput.value.trim()) {
    console.log(`用户ID ${userId} 发送消息: ${chatInput.value}`);
    // 这里可以emit或push消息
    chatInput.value = '';
    message.success('消息发送成功');
  }
}

function handleInputKeydown(e) {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault();
    sendMessage();
  }
}

// 组件挂载时检查用户登录状态
onMounted(() => {
  userInfo.value = checkUserLogin();
});
</script>
<style scoped>
.bg-primary {
    background: #165dff;
}

.bg-secondary {
    background: #722ed1;
}

.bg-success {
    background: #00b42a;
}

.text-primary {
    color: #165dff;
}

.text-secondary {
    color: #722ed1;
}

.text-success {
    color: #00b42a;
}

.text-yellow-500 {
    color: #ffb800;
}

.container {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}


.discussion-title-block {
    text-align: center;
    margin-bottom: 32px;
}

.discussion-title {
    font-size: 44px;
    font-weight: 800;
    color: #23272e;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.discussion-desc {
    font-size: 20px;
    color: #6b7280;
    margin-bottom: 0;
    font-weight: 400;
}

.group-list-card {
    box-shadow: 0 4px 24px rgba(22, 93, 255, 0.08), 0 1.5px 4px rgba(0, 0, 0, 0.04) !important;
    border-radius: 20px !important;
}

.group-list-header {
    background: #165dff;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    padding: 18px 28px 12px 28px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    letter-spacing: 1px;
}

.group-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 2px 8px rgba(22, 93, 255, 0.04);
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: box-shadow 0.2s, border 0.2s, background 0.2s;
}

.group-card-active {
    border: 1.5px solid #165dff;
    background: #f5faff;
}

.group-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.group-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 2px;
}

.group-desc {
    font-size: 13px;
    color: #888;
}

.member-list-card {
    box-shadow: 0 4px 24px rgba(22, 93, 255, 0.08), 0 1.5px 4px rgba(0, 0, 0, 0.04) !important;
    border-radius: 20px !important;
}

.member-list-header {
    background: #f5faff;
    color: #165dff;
    font-weight: bold;
    font-size: 16px;
    padding: 14px 28px 10px 28px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    letter-spacing: 1px;
}

.member-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.member-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.member-name {
    font-weight: 500;
    font-size: 15px;
}

.member-status {
    font-size: 12px;
}

.discussion-main-card {
    box-shadow: 0 8px 32px rgba(22, 93, 255, 0.08), 0 1.5px 4px rgba(0, 0, 0, 0.04) !important;
    border-radius: 24px !important;
}

.msg-bubble {
    border-radius: 18px;
    font-size: 15px;
    padding: 16px 22px;
    margin-top: 2px;
    margin-bottom: 2px;
    box-shadow: 0 2px 8px rgba(22, 93, 255, 0.04);
    max-width: 480px;
    word-break: break-all;
}

.msg-bubble-other {
    background: #f5f6fa;
    color: #222;
    border: 1.5px solid #eaf4ff;
}

.msg-bubble-me {
    background: #165dff;
    color: #fff;
    border: 1.5px solid #165dff;
    text-align: left;
}

.discussion-header-icon {
  background: #165dff;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.discussion-header-title {
  font-size: 18px;
  font-weight: bold;
  color: #23272e;
}
.discussion-header-desc {
  font-size: 13px;
  color: #888;
  margin-top: 2px;
}
.header-flat-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
  background: none;
  border-radius: 0;
  box-shadow: none;
  font-size: 18px;
  color: #4b5563;
  margin: 0;
  padding: 0;
  transition: color 0.18s;
  cursor: pointer;
}
.header-flat-btn + .header-flat-btn {
  margin-left: 2px;
}
.header-flat-btn:hover,
.header-flat-btn:focus {
  color: #165dff;
  background: none;
}
.chat-input-bar {
  width: 100%;
  height: 100px;
  min-height: 100px;
  max-height: 100px;
  background: #fff;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
  margin-top: 0 !important;
  border-top: 1px solid #e5e7eb !important;
}
.chat-input-icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
  background: #f5f6fa;
  border-radius: 50%;
  font-size: 18px;
  color: #6b7280;
  margin: 0;
  padding: 0;
  transition: background 0.18s, color 0.18s;
  cursor: pointer;
}
.chat-input-icon-btn:hover {
  background: #eaf4ff;
  color: #165dff;
}
.chat-input-el :deep(.el-input__wrapper) {
  border-radius: 18px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 44px;
  font-size: 16px;
}
.chat-send-btn {
  border-radius: 16px !important;
  font-size: 16px;
  padding: 0 32px;
  height: 44px;
  background: #165dff;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(22,93,255,0.08);
  transition: background 0.18s;
}
.send-btn-abs {
  position: absolute !important;
  right: 24px;
  bottom: 18px;
  z-index: 2;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  font-size: 16px !important;
  padding: 0 !important;
  background: #fff !important;
  color: #165dff !important;
  border: 1.5px solid #e5e7eb !important;
  box-shadow: 0 2px 8px rgba(22,93,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s, color 0.18s;
}
.send-btn-abs:hover {
  border-color: #165dff !important;
  color: #165dff !important;
  background: #f5faff !important;
}
.send-btn-abs i {
  font-size: 16px;
}
.chat-input-el :deep(.el-textarea__inner) {
  border-radius: 18px !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  min-height: 44px;
  font-size: 16px;
  resize: none !important;
}
.chat-list-area {
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(100% - 100px);
  overflow-y: auto;
  background: #f7f8fa;
  padding: 24px 0 0 0;
  font-size: 15px;
}
.wx-row {
  display: flex;
  align-items: flex-end;
  margin-bottom: 18px;
  max-width: 100%;
}
.wx-row-other {
  flex-direction: row;
  justify-content: flex-start;
  padding-left: 24px;
}
.wx-row-me {
  flex-direction: row-reverse;
  justify-content: flex-end;
  padding-right: 24px;
}
.wx-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 8px;
  box-shadow: 0 1px 4px rgba(22,93,255,0.08);
}
.wx-msg-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 60vw;
}
.wx-row-me .wx-msg-block {
  align-items: flex-end;
}
.wx-name {
  font-size: 13px;
  color: #888;
  margin-bottom: 2px;
  margin-left: 2px;
}
.wx-row-me .wx-name {
  color: #7daaff;
  margin-right: 2px;
  margin-left: 0;
}
.wx-bubble {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 4px;
  box-shadow: 0 2px 8px rgba(22,93,255,0.04);
  word-break: break-word;
  max-width: 320px;
  min-width: 40px;
  display: inline-block;
}
.wx-bubble-other {
  background: #fff;
  color: #222;
  border: 1px solid #e5e7eb;
  align-items: flex-start;
}
.wx-bubble-me {
  background: #95ec69;
  color: #222;
  border: 1px solid #b7eb8f;
  align-items: flex-end;
}
.wx-time {
  font-size: 13px;
  color: #b0b0b0;
  margin-top: 2px;
  align-self: flex-start;
  background: #e5e7eb;
  border-radius: 6px;
  padding: 1px 10px;
  margin-left: 2px;
}
.wx-row-me .wx-time {
  align-self: flex-end;
  background: #e5e7eb;
  color: #b0b0b0;
  margin-right: 2px;
  margin-left: 0;
}
</style>